@mixin disabled() {
  cursor: not-allowed;
  color: rgba($text-color, 0.4);
  background-color: $input-disabled-bg;
  border-color: transparent;
  pointer-events: none;
  resize: unset;
}

@mixin hover() {
  border-color: $input-hover-bc;
  background: $input-hover-bg;
}

@mixin input-border() {
  border: 2px $input-bc solid;
  &:hover {
    @include hover();
  }
  &:active {
    border-color: $input-bc;
  }
}

@mixin input() {
  @include reset-component();

  position: relative;
  display: inline-block;
  width: 100%;
  height: $input-height;
  padding: $input-padding;
  border-radius: $border-radius-base;
  @include input-border();
  // &:focus {
  //   border-color: $primary-color !important;
  //   background: $white !important;
  // }
  &-focus {
    border-color: $primary-color !important;
  }
  &-disabled {
    @include disabled();
  }
}

@mixin clear() {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  user-select: none;
  &:hover {
    color: $primary-color;
  }
  &:active {
    color: #fff;
    background: $primary-color;
  }
}
